<template>
  <div>
    <div class="row ">
      <div class="col">
        <el-breadcrumb class="border ps-2" style="height: 50px;line-height: 50px" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item to="/Team">竞赛队伍</el-breadcrumb-item>
            <el-breadcrumb-item>队伍详情</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
    </div>
    <div class="row mt-1 mb-3">
     <div class="col">
      <template v-if="team!==''">
        <el-descriptions  class="margin-top border"  title="队伍信息" :column="2" >
          <template slot="extra">
            <el-button type="primary" :disabled="team.status === 1" data-bs-toggle="modal"
                       data-bs-target="#staticBackdrop" size="small"  @click="joinTeam(team)">加入队伍</el-button>
          </template>
          <el-descriptions-item label="队伍名称">{{team.name}}</el-descriptions-item>
          <el-descriptions-item label="队伍成员">{{team.children|children}}</el-descriptions-item>
          <el-descriptions-item label="人数限制">{{team.children.length}}/{{team.num}}</el-descriptions-item>
          <el-descriptions-item label="队长">{{team.user[0].name}}</el-descriptions-item>
          <el-descriptions-item label="队伍状态">
            <el-tag size="small" :type="team.status === 0?'':'danger'">
              {{ team.status === 0 ? '可加入' : '已满员' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="竞赛名称"><span class="contest" @click="ContestDetail(team.contestID)">{{team.contest[0].name}}</span></el-descriptions-item>
          <el-descriptions-item label="截止时间">{{team.contest[0].applyEndDate|time}}</el-descriptions-item>
        </el-descriptions>
      </template>
     </div>
    </div>

    <!--   模态框 -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">{{ modelTitle }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <template v-if="isVisibleForm">
              <el-form :model="teamForm" :rules="rules" ref="teamForm" label-width="100px"
                       class="demo-ruleForm">
                <el-form-item label="团队名称" prop="name">
                  <el-input v-model="teamForm.name"></el-input>
                </el-form-item>
                <el-form-item label="组队人数" prop="num">
                  <el-input v-model.number="teamForm.num"></el-input>
                </el-form-item>
                <el-form-item label="竞赛名称" prop="value">
                  <el-select v-model="teamForm.value" placeholder="请选择">
                    <el-option
                        v-for="item in contest"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
            <template v-else>
              {{ modelBody }}
            </template>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <template v-if="isVisibleForm">
              <button type="button" class="btn btn-primary" @click="confirmTeam">确认发起</button>
            </template>
            <template v-else>
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确认</button>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import user from "../../../api/user";
import children from "../../../filter/children";
import time from "../../../filter/time";
export default {
  name: "TeamDetail",
  filters:{
    children,time
  },
  data(){
    var checkNum = (rule, value, callback) => {
      if (Number(value) < 3 || Number(value) > 8) {
        callback(new Error("人数在3到8人"))
      } else if (value === "") {
        callback(new Error("请输入队伍人数"))
      } else {
        callback()
      }
    }
    return{
      id:JSON.parse(localStorage.getItem("id")),
      team:'',
      isVisibleForm: false,
      modelTitle: '',
      modelBody: '您还没有报名团队赛，请先报名！',
      rules: {
        name: [
          {required: true, message: '请输入团队名称', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 3 到 8 个字符', trigger: 'blur'}
        ],
        num: [
          {validator: checkNum, trigger: 'blur'},
          {type: 'number', message: '年龄必须为数字值'}
        ],
        value: [
          {required: true, message: '请选择报名竞赛', trigger: 'change'}
        ]
      },
      // 组队表单
      teamForm: {
        name: '',
        num: '',
        value: ''
      },
    }
  },
  mounted() {
    this.GetUserByID()
  },
  methods:{

    // 加入队伍
    joinTeam(el) {
      if (this.$store.getters["userStore/userInfo"].status !== 0) {
        this.isVisibleForm = false
        const param = {
          teamID: el._id,
          userID: el.children[0].userID,
          applyID: this.$store.getters["userStore/userInfo"]._id
        }
        const children = el.children
        let flag = false
        children.some(c => {
          if (this.$store.getters["userStore/userInfo"]._id === c.userID) {
            flag = true
          }
        })
        if (flag) {
          this.isVisibleForm = false
          this.modelTitle = "温馨提示"
          this.modelBody = "您已经加入该队伍"
        } else if (children.length === el.num) {
          this.isVisibleForm = false
          this.modelTitle = "温馨提示"
          this.modelBody = "人数已满"
        } else {
          const loading = this.$loading({
            lock: true,
            text: '正在申请加入',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          user.joinTeam(param).then(r => {
            if (r.status === 200) {
              loading.close();
              this.isVisibleForm = false
              this.modelTitle = "温馨提示"
              this.modelBody = "申请成功"
            }
          })
        }
      } else {
        this.isVisibleForm = false
        this.modelTitle = "温馨提示"
        this.modelBody = "您的信息未认证，请先到个人中心认证"
      }
    },

    confirmTeam() {
      this.$refs.teamForm.validate(v => {
        if (v) {
          const param = {...this.teamForm}
          user.ApplyTeamConfirm(param).then(r => {
            if (r.data.status === "200" && r.data.data.msg === '') {
              this.$message({
                message: '组队成功',
                type: 'success'
              });
              this.GetAllTeam()
            } else {
              this.$message({
                message: '队伍已存在',
                type: 'error'
              });
            }
          })
        } else {
          return false;
        }
      })
    },

    // 详细页面
    ContestDetail(id) {
      localStorage.setItem("detailId", JSON.stringify(id))
      this.$router.push("/detail")
    },
    // 获取队伍信息
    GetUserByID(){
      user.GetUserByID({id:this.id}).then(r=>{
        this.team = r.data.data.tm[0]
      })
    }
  }
}
</script>

<style scoped>
.contest:hover{
  cursor: pointer;
  color: #40aaff;
  text-decoration: underline;
}
</style>